<template>
  <div class="batch-booking-area">
    <div class="middle">
      <bread-crumb class="bread-crumb-padding" :list="breadCrumb"></bread-crumb>
      <div class="flx-row-bw-s">
        <div class="left-area">
          <div class="flx-row-s-c" style="margin-bottom: 15px">
            <input
              v-model.trim="search"
              type="text"
              class="search-input"
              placeholder="请输入关键词试试"
              maxlength="50"
              @keyup.enter="submit"
            />
            <div class="user-strong-button search-button" @click="submit">
              搜索
            </div>
          </div>
          <div class="bottom-area">
            <Spin :withIcon="true" v-if="loading"></Spin>
            <div class="b-b flx-row-bw-c title-area">
              <div class="flx-row-s-c">
                <span class="title-h3"
                  >域名 <span class="search-dn search-dn">{{ search }}</span
                  >的信息</span
                >
                <div
                  class="user-strong-button small-button-size"
                  style="margin-left: 30px; min-width: 80px"
                >
                  商标查询
                </div>
                <div
                  class="user-strong-button small-button-size"
                  style="margin-left: 30px; min-width: 80px"
                >
                  委托购买
                </div>
              </div>
              <div class="flx-row-s-c">
                <div
                  class="user-normal-button small-button-size"
                  style="min-width: 48px"
                >
                  访问
                </div>
                <div
                  class="user-normal-button small-button-size"
                  style="margin-left: 17px; min-width: 48px"
                >
                  百度
                </div>
              </div>
            </div>
            <template>
              <div class="flx-row-s-c detail-list-item">
                <span class="title">注册商</span>
                <span class="content">Sc Corporate Domains,Inc.</span>
              </div>
              <div class="flx-row-s-c detail-list-item">
                <span class="title">注册时间</span>
                <span class="content">2020-02-03 12:00</span>
              </div>
              <div class="flx-row-s-c detail-list-item">
                <span class="title">过期时间</span>
                <span class="content">2021-02-03 12:00</span>
              </div>
              <div class="flx-row-s-c detail-list-item">
                <span class="title">域名状态</span>
                <span class="content"
                  >注册商设置禁注册商设置禁止转移注册商设置禁止转移注册商设置禁止转移注册商设置禁止转移止转移</span
                >
              </div>
              <div class="flx-row-s-c detail-list-item">
                <span class="title">DNS服务器</span>
                <span class="content"
                  >NS0.DNSMADEEASY.CONNS0.DNSMADEEASY.CONNS0.DNSMADEEASY.CONNS0.DNSMADEEASY.CON</span
                >
              </div>
              <div class="flx-col-s-s detail-list-item-temp">
                <span class="title">DNS服务器</span>
                <span class="content"
                  >NS0.DNSMADEEASY.CONNS0.DNSMADEEASY.CONNS0.DNSMADEEASY.CONNS0.DNSMADEEASY.CON</span
                >
              </div>
            </template>
            <Empty-State
              style="background-color: #fff"
              content="资讯不存在！"
            ></Empty-State>
          </div>
        </div>
        <div class="news-right-area">
          <div class="box" style="margin-bottom: 15px">
            <div class="b-b">
              <h3 class="title-h3" style="margin: 20px 19px 13px">
                相关域名推荐
              </h3>
            </div>
            <div class="list-area">
              <div
                class="flx-row-bw-c list-item"
                v-for="(item, index) in dnRecommendList"
                :key="index"
              >
                <span class="c-d2 dn"
                  >baidu.combaidu.combaidu.combaidu.combaidu.com</span
                >
                <div class="flx-row-s-c">
                  <span class="o-form-font-button" style="margin-right: 20px"
                    >委托购买</span
                  >
                  <span class="o-form-font-button">whois </span>
                </div>
              </div>
            </div>
          </div>
          <div class="box">
            <div class="b-b">
              <h3 class="title-h3" style="margin: 20px 19px 13px">预订推荐</h3>
            </div>
            <table class="table-area">
              <tbody>
                <tr v-for="(item, index) in recommendList" :key="index">
                  <td>
                    <div class="line-style">
                      <span class="normal-f f-ell-sin" :title="item.name">{{
                        item.name
                      }}</span>
                    </div>
                  </td>
                  <td>
                    <div class="line-style">
                      <span class="normal-f f-ell-sin">{{ item.meaning }}</span>
                    </div>
                  </td>
                  <td>
                    <div class="line-style">
                      <div class="button button-size">前往预订</div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      breadCrumb: [{ name: "域名搜索", to: "/dmsearch" }],
      search: "",
      dnRecommendList: [1, 2, 3, 5, 6, 1],
      recommendList: [
        {
          name: "baidu.com",
          meaning: "百度、摆渡",
        },
        {
          name: "baidu.com",
          meaning: "百度、摆渡",
        },
        {
          name: "baidu.com",
          meaning: "百度、摆渡",
        },
        {
          name: "baidu.com",
          meaning: "百度、摆渡",
        },
        {
          name: "baidu.com",
          meaning: "百度、摆渡",
        },
      ],
    };
  },
  watch: {},
  created() {},
  methods: {
    // 搜索
    submit() {

    },
  },
};
</script>

<style lang="scss" scoped>
.batch-booking-area {
  background-color: #f7f7f7;
  padding-bottom: 20px;

  .left-area {
    width: 750px;
    .search-input {
      height: 50px;
      width: 100%;
      line-height: 50px;
      padding: 0 30px;
      font-size: 16px;
      background-color: #fff;
    }
    .search-button {
      @include size(120px, 50px);
      font-size: 16px;
      font-weight: 600px;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
      flex-shrink: 0;
    }
    .bottom-area {
      background-color: #fff;
      position: relative;
      box-shadow: 0px 0px 11px 2px rgba(0, 16, 36, 0.02);
      min-height: 400px;
      border: 1px solid #eaeaea;

      .title-area {
        height: 58px;
        padding: 0 30px 0 16px;

        .search-dn {
          max-width: 200px;
          @include f-ell-sin;
        }
      }
      .detail-list-item:nth-child(even) {
        background-color: #f9fafb;
      }
      .detail-list-item:nth-child(odd) {
        background-color: #fff;
      }
      .detail-list-item {
        padding: 11px 140px;
        min-height: 50px;
        .title {
          width: 80px;
          text-align: right;
          color: rgba($color: #3d3d3d, $alpha: 0.8);
          margin-right: 32px;
          flex-shrink: 0;
        }
      }
      .detail-list-item-temp {
        padding: 30px 40px;
        line-height: 25px;
        background-color: #fff;
        .title {
          color: rgba($color: #3d3d3d, $alpha: 0.8);
        }
      }
      .content {
        width: 100%;
        color: rgba($color: #3d3d3d, $alpha: 0.6);
        word-break: break-all;
      }
    }
  }
  .news-right-area {
    width: 435px;

    .box {
      background-color: #fff;
      box-shadow: 0px 0px 11px 2px rgba(0, 16, 36, 0.02);
      border: 1px solid #eaeaea;
      padding-bottom: 30px;
    }
  }
  .table-area tr:nth-child(even) {
    background-color: #f9fafb;
  }
  .table-area tr:nth-child(odd) {
    background-color: #fff;
  }
  .b-b {
    border-bottom: #e5e5e5 solid 1px;
  }
  .list-area .list-item:nth-child(even) {
    background-color: #f9fafb;
  }
  .list-area .list-item:nth-child(odd) {
    background-color: #fff;
  }
  .list-item {
    width: 100%;
    height: 50px;
    padding: 0 30px;
    font-size: 14px;
    transition: transform 0.1s, box-shadow 0.3s;

    &:hover {
      transform: scale(1.01);
      box-shadow: 0 2px 12px 0 rgba(#000, 0.1);
    }
    .dn {
      max-width: 200px;
      @include f-ell-sin;
    }
  }
}
</style>
